<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆球游戏</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        .container {
            position: relative;
            margin: 0 auto;
            width: 440px;
            height: 440px;
            background-color: blanchedalmond;
        }
        .ball {
            position:absolute;
            width: 30px;
            height: 30px;
            left:0px;
            top:0px;
            background-color:orange;
            border-radius: 15px;
        }
        .board {
            position:absolute;
            left: 0px;
            bottom: 0px;
            height: 10px;
            width: 80px;
            border-radius: 5px;
            background-color: red;
        }
    </style>
</head>
<!-- 游戏制作步骤：
1、基本DOM结构和CSS编写
   - 子绝父相
2、各子元素的位置控制
   - 坐标系
-->
<body>
    <div id="Application">
        <!-- 游戏区域 -->
        <div class="container">
            <!-- 底部挡板 -->
            <div class="board" :style="{left:boardX+'px'}"></div>
            <!-- 弹球 -->
            <div class="ball" :style="{left:ballX+'px',top:ballY+'px'}"></div>
            <!-- 游戏结束提示 -->
            <h3 v-show="fail">游戏失败</h3>
        </div>
    </div>
    <script>
        const App = {
            data() {
               return {
                boardX:0,
                ballX:100,
                ballY:50,
                rateX:0.1,
                rateY:0.1,
                fail:false
               }
            },
            // 组件生命周期函数，组件加载时会调用
            mounted() {
               document.addEventListener('keydown',this.keydown) 
               this.rateX+=Math.random()               
               this.rateY+=Math.random() 
               this.timer=setInterval(()=>{
               //到达右侧边缘进行反弹
               if(this.ballX+this.rateX>=440-30){
                this.rateX *= -1;
               }
                  //到达左侧边缘进行反弹
                  if(this.ballX+this.rateX>=440-30){
                this.rateX *= -1;
               }
                  //到达上侧边缘进行反弹
                  if(this.ballY+this.rateY>=440-30){
                this.rateY *= -1;
               }
                this.ballX += this.rateX;
                this.ballY += this.rateY;
                //失败判定
                if(this.ballY>=440-30-10){
                    //挡板挡住了弹球，进行反弹
                    if(
                        this.boardX<=this.ballX+30&&
                        this.boardX+80>=this.ballX
                    ){
                        this.rateY*=-1;
                    }else{
                        //没有接住弹球，游戏结束
                        clearInterval(this.timer);
                        this.fail=true;
                    }
                }
               },20)

            },
            methods: {
                keydown(event){
                    console.log(event.key)
                    if(event.key=="ArrowLeft"){
                        if(this.boardX>10){
                            this.boardX-=20
                        }
                    }else if(event.key=="ArrowRight"){
                        if(this.boardX<440-80){
                            this.boardX+=20
                        }
                    }
                }
            }
        }
        Vue.createApp(App).mount("#Application") 
    </script>
</body>
</html>